<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/ehome/static/css/layui.css" media="all">
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <!--layui的js部分-->
    <script src="/ehome/static/layui.js"></script>
    <script src="/ehome/static/lib/jquery-3.1.1.min.js"></script>
    <script src="/ehome/static/lib/jquery.cookie.js"></script>
    <style>
        body{
            background-color: lightgray;
        }
        h2{
            text-align: center;
            margin:30px auto;
            color:darkgray;
            line-height: 60px;
        }

        div.layadmin-user-login-main{
            width: 50%;
            margin: 0 auto;
            background-color: white;
        }
        .ehome-input{
            float:left;
            width:85%;
            margin-left: 20px;

        }
        .ehome-input-label{
            display: block;
            float:left;
            height: 36px;
            width: 30px;
            line-height: 36px;
            margin-left: -28px;
        }
    </style>
</head>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="width:600px;margin: 200px auto;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>管理员登录</h2>
        </div>

        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <!--用户名输入框部分-->
            <div class="layui-form-item">
                <input type="text" name="jobNumber" id="jobNumber" lay-verify="required" placeholder="工号" class="layui-input ehome-input" maxlength="20" value="GL001">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username ehome-input-label" for="jobNumber" id="jobNumberLabel"></label>
            </div>
            <!--用户密码输入框部分-->
            <div class="layui-form-item">

                <input type="password" name="password" id="password" lay-verify="required" placeholder="密码" class="layui-input ehome-input"  maxlength="20" value="123456">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password ehome-input-label" for="password"  id="passwordLabel"></label>
            </div>
            <div class="layui-form-item">
                <button id="logBtn" class="layui-btn layui-btn-fluid layui-btn-disabled" lay-submit
                        lay-filter="LAY-user-login-submit" disabled="disabled">登
                    入</button>
            </div>

            <!--滑块div-->
            <div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->

            <script type="text/javascript">
                var nc_token = ["FFFF0N000000000093A3", (new Date()).getTime(), Math.random()].join(':');
                var NC_Opt =
                    {
                        renderTo: "#your-dom-id",
                        appkey: "FFFF0N000000000093A3",
                        scene: "nc_login",
                        token: nc_token,
                        customWidth: 300,
                        trans:{"key1":"code0"},
                        elementID: ["usernameID"],
                        is_Opt: 0,
                        language: "cn",
                        isEnabled: true,
                        timeout: 3000,
                        times:5,
                        apimap: {
                            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                            // 'get_captcha': '//b.com/get_captcha/ver3',
                            // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                            // 'get_img': '//c.com/get_img',
                            // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                            // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                            // 'umid_serUrl': 'https://g.com/service/um.json'
                        },
                        callback: function (data) {
                           /* window.console && console.log(nc_token)
                            window.console && console.log(data.csessionid)
                            window.console && console.log(data.sig)*/

                           // 验证通过的时候, 让登录按钮可用
                           // console.log($("#logBtn"))
                            $("#logBtn").removeAttr("disabled");
                            $("#logBtn").removeClass("layui-btn-disabled");
                        }
                    }
                var nc = new noCaptcha(NC_Opt)
                nc.upLang('cn', {
                    _startTEXT: "请按住滑块，拖动到最右边",
                    _yesTEXT: "验证通过",
                    _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                    _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
                })
            </script>
        </div>
    </div>



</div>



<script>
    //单独引入jQuery
    $(function(){
       /* //实现点击切换验证码, 这里有个技巧,图片点击实现切换的前提,是必须保证每次产生的地址不同,利用地址中的参数:  localhost:8080/code?随机数
       $("#code_img").click(function(){
            $(this).attr("src","");
        });*/

       // 当启动登录页, 判断浏览器是否保存过cookie( 前端方法)
      /* var cookie =  $.cookie("jobNumber");
       if(cookie){
           // 前端页面跳转到首页: window.location.href = "目标地址"
           location.href = "/ehome/static/html/index.html";
       }*/

      // 不能用获取cookie 的方法获取JSESSIONID  , 它的属性是HTTPONLY (只能用于传输,不能访问)
      var session =  $.cookie("JSESSIONID");

  });

  // layui引用模块操作
  layui.use(['form', 'jquery'], function(){
      $ = layui.$
              ,layer = layui.layer
              ,form = layui.form
              ,router = layui.router()
              ,search = router.search;


      form.render();   // 执行表单渲染

      //表单提交事件
      form.on('submit(LAY-user-login-submit)', function(obj){

          // ajax提交: 后端使用@RequestBody , 需要让ajax中的data做字符串序列化处理
          // 类型必须是post
          $.ajax({
              contentType:"application/json;charset=utf-8"
              ,url:"/ehome/sysUser/login2"
              ,data:JSON.stringify(obj.field)
              ,type:"post"
              ,dataType:"json"
              ,success:function (returnData){
                  layer.msg(returnData.msg)
                  if(returnData.code == "0"){
                      location.href = "/ehome/static/html/index.html";
                  }

              },error:function(e){
                  console.log(e)
              }
          })
      });

  });
</script>
</body>
</html>